<template>
  <view class="page">
    <view class="header">
      <!-- 左侧文档 -->
      <view class="logo">
        <text>LOGO</text>
        <text>校务行 | 督学刷题</text>
      </view>
      <!-- 右侧积分 -->
      <view class="jifen">
        <text>积分</text>
      </view>
      <!-- 轮播 -->

      <!-- 上下tab-->
    </view>
    <!-- 轮播区域 -->
    <view class="swpier">
      <banner :position="1" height="180rpx"></banner>
    </view>
    <!-- tab导航栏  -->
    <view class="tabblock">
      <view class="tab">
        <image class="image" :src="tabPicture"></image>
        <text class="title">收藏</text>
      </view>
      <view class="tab">
        <image class="image" :src="tabPicture"></image>
        <text class="title">收藏</text>
      </view>
      <view class="tab">
        <image class="image" :src="tabPicture"></image>
        <text class="title">收藏</text>
      </view>
      <view class="tab">
        <image class="image" :src="tabPicture"></image>
        <text class="title">收藏</text>
      </view>
    </view>
    <!-- 图标文本跳转 -->
    <view class="icontext">
      <text class="textleft">我的自 </text>
      <span class="corlortext">习</span>
      <text class="textright">学习日志></text>
      <!-- <uniicons type="right" size="10" color="red"></uniicons> -->
    </view>
    <!-- button切换按钮 -->
    <view class="btnchange">
      <button class="btn" type="default" size="mini">自习室</button>
      <button class="btn" type="default" size="mini">排行榜</button>
    </view>
    <!-- view卡片区 -->
    <uni-card class="card">
      <view class="left">
        <text class="learntext">学习时长排行榜</text>
        <text class="learn"
          style="display: block; background-color: rgba(255, 255, 255, 1); color: rgba(187, 187, 187, 1)">1.4k人学习中</text>
        <button class="btn" type="default" size="mini">去自习</button>
      </view>
    </uni-card>
    <view class="right">
      <image class="image" :src="tabPicture" style=""></image>
    </view>
    <!-- 图标文本跳转 -->
    <view class="icontext" style="margin-top: -77px">
      <text class="textleft">督学打卡</text>
      <span class="corlortext">活动</span>
      <text class="textright margin">体验更多></text>
      <!-- <uniicons type="right" size="10" color="red"></uniicons> -->
    </view>
    <uni-card class="card">
      <view class="pk">
        <image class="image" :src="tabPicture" style=""></image>
        <text class="learn" style="display: block">参与打开比赛,赢取福利</text>
        <button class="btn" type="default" size="mini">去pk</button>
      </view>
    </uni-card>
    <!-- 卡片三组合 -->
    <!-- <uni-card style="width: 100rpx;height: 100rpx;">
      <view class="cardone">
        <text class="learn" style="display: block;">参与打开比赛,赢取福利</text>
        <button class="btn" type="default" size="mini">去pk</button>
        <image class="image" :src="tabPicture" style="width: 10rpx; height: 10rpx;"></image>
      </view>
    </uni-card> -->

    <div class="card-container">
      <uni-card class="card3">
        <view class="">
          <text class="learn">背2800单词</text>
          <button class="btn" type="default" size="mini">1月</button>
          <image class="image" :src="tabPicture"></image>
        </view>
      </uni-card>
      <uni-card class="card3">
        <view class="">
          <text class="learn">早起打卡挑战</text>
          <button class="btn" type="default" size="mini">1月</button>
          <image class="image" :src="tabPicture"></image>
        </view>
      </uni-card>
      <uni-card class="card3">
        <view class="">
          <text class="learn">雅思听力训练</text>
          <button class="btn" type="default" size="mini">1月</button>
          <image class="image" :src="tabPicture"></image>
        </view>
      </uni-card>
    </div>
  </view>
</template>

<script>
import uniicons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue"
import request from "../../utils/request"
import arrayUtils from "../../utils/arrayUtils"
import { getShowImage } from "@/utils"
import { getStaticUrl } from "@/utils/settings"
import banner from "@/components/banner.vue"
export default {
  computed: {
    appListRender() {
      return arrayUtils.toTwoDimensionalArray(this.appList, 5)
    },
  },
  components: { banner, uniicons },
  data() {
    return {
      appList: [],
      getStaticUrl,
      // switchIcon,
      currentExam: null,
      userInfo: null,
      currentTab: "题库大全",
      mode: "",
      tabPicture: require("./assets/tablogo.png"),
    }
  },

  methods: {
    // 获取图片
    getShowImage,
  },
}
</script>

<style lang="scss" scoped>
.page {

  //头部
  .header {
    // 背景
    width: 100%;
    // 调控块高度
    height: 76rpx;
    background-color: rgba(255, 255, 255, 1);
    //background-color: pink;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      font-size: 30rpx;
      margin-left: 16rpx;
    }

    .jifen {
      width: 80rpx;
      /* 示例宽度，根据需要调整 */
      height: 75rpx;
      /* 示例高度，应与宽度相同以保持圆形 */
      /* 边框宽度和颜色 */
      line-height: 75rpx;
      border: 1rpx solid rgba(187, 187, 187, 1);

      border-radius: 50%;
      /* 关键属性，设置为50%以形成圆形 */
      text-align: center;
      overflow: hidden;
      background-color: rgba(255, 255, 255, 1);
      margin-right: 12rpx;
    }
  }

  // 轮播样式
  .swpier {
    border-radius: 20rpx;
    overflow: hidden;
  }

  // tab样式
  .tabblock {
    display: flex; // 默认就是row，所以不需要写flex-direction: row;
    background-color: #fff;
    gap: 10px; // 添加间隔，使各个.tab之间有空隙

    .tab {
      display: flex; // 这将保持图片和文字的默认垂直排列
      flex-direction: column;
      align-items: center; // 使图片和文字在 tab 内部居中对齐（根据你的需求，也可以是flex-start）
      margin-left: 36rpx;

      .image {
        width: 16vw;
        height: 15vw;
      }

      .title {
        margin-top: 10rpx;
        font-size: 35rpx;
      }
    }
  }

  //图标文本
  .icontext {
    display: flex;
    /* 使用Flex布局 */
    align-items: center;
    /* 图标和文本垂直居中对齐 */
    gap: 5rpx;
    margin-bottom: -9rpx;
    margin-top: 9rpx;
    // margin-right: 402rpx;
    padding-right: 8rpx;
    white-space: nowrap;
    /* 禁止换行 */

    /* 图标和文本之间的间距，根据需要调整 */
    .textleft {
      background-color: rgba(255, 255, 255, 1);

      color: rgba(16, 16, 16, 1);
      font-size: 36rpx;
      font-family: Arial;
      // 加粗
      font-weight: bold;
      margin-left: 19rpx;

    }

    .corlortext {
      transform: translateX(-5%);
      color: green;
    }

    .textright {
      font-size: 36rpx;
      font-family: PingFangSC-regular;
      color: rgba(187, 187, 187, 1);
      margin-left: 398rpx;
    }

    // 字数多了后间距的调整
    .margin {
      margin-left: 320rpx;
    }
  }

  //跳转按钮
  .btnchange {
    padding-left: 10rpx;
    // padding-right: 10rpx;

    .btn {
      // /* 文本居中 */
      font-size: 31rpx;
      /* 调整字体大小 */
      border: 4rpx solid rgba(251, 193, 33, 0.74);
      width: 200rpx;
      height: 72rpx;
      background: while;
      border-radius: 36rpx;
      margin-left: 7rpx;
      margin-top: 17rpx;
    }
  }

  //卡片文本
  .card {
    width: 100%;
    // height: auto;
    // height: 100px;

    // position: relative;
    .left {
      // position: absolute;
      left: 0;
      top: 50%;
    }

    .learntext {
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-weight: bold;
    }

    .btn {
      font-size: 31rpx;
      /* 调整字体大小 */
      border: 4rpx solid rgba(251, 193, 33, 0.74);
      width: 200rpx;
      height: 72rpx;
      background-color: rgba(84, 189, 129, 1);
      color: rgba(255, 255, 255, 1);
      border-radius: 36rpx;
      margin-left: 7rpx;
      margin-top: 12px;
    }
  }

  //卡片图片
  .right {
    // position: absolute;

    >.image {
      width: 20vw;
      height: 71px;
      margin-left: 413rpx;
      transform: translateY(-159%);
    }
  }

  // 去pk卡片
  .pk {
    display: flex;

    .image {
      width: 19vw;
      height: 20vw;
      margin-left: -20rpx;
    }

    .learn {
      margin-left: -44rpx;
      transform: translateX(50%);
      font-size: 12rpx;
      font-size: 26rpx;
      margin-top: 53rpx;
    }

    .btn {
      // margin-left: 10px;
      font-size: 31rpx;
      /* 调整字体大小 */
      border: 4rpx solid rgba(251, 193, 33, 0.74);
      width: 200rpx;
      height: 72rpx;
      background: while;
      border-radius: 36rpx;
      margin-left: 21rpx;
      // 向墙边移动
      left: 124rpx;
      margin-top: 36rpx;
    }
  }

  // 机型iphon5和大屏幕有问题
  .card-container {
    display: flex;
    justify-content: space-between;
    // flex-direction: column;
    // justify-content: center;
    align-items: center;
    padding-right: 50rpx;
    // overflow: auto;
    width: 100%;
    // width: 200vw;

    .card3 {
      // box-sizing: border-box;
      // margin-right: -63rpx;
      margin-top: -14rpx;
      // margin-right: -48rpx;
      margin-right: -50rpx;


      .learn {
        // margin-bottom: 10px;
        font-size: 24rpx;
        width: 60rpx;
        height: 48rpx;
        /* 根据需求调整间距 */
        white-space: nowrap;
        margin-top: -9rpx;
        margin-left: -15rpx;

      }

      .btn {
        // margin-left: 10px;
        font-size: 22.5rpx;
        /* 调整字体大小 */
        border: 4rpx solid rgba(251, 193, 33, 0.74);
        // width: 84rpx;
        width: 104rpx;
        height: 53rpx;
        // height: -49rpx;
        background: while;
        border-radius: 36rpx;
        // margin-top: 7px;
        margin-left: -10rpx;
      }

      .image {
        width: 64rpx;
        height: 79rpx;
        margin-left: 76rpx;
      }
    }
  }
}
</style>
